/**
 * 头部模块
 * @author xiaoxujs
 */

import { HeaderBox } from "./style";

import DynamicsTime from '../../../../components/DynamicsTime'
import { useEffect, useState } from "react";
import { Dropdown } from "antd";
import { useNavigate } from "react-router-dom";
import { sessionRemove } from "../../../../assets/fun/commit/loginOutFun";

const Header = () => {
    const navigate = useNavigate();

    const [name, setName] = useState('');// 姓名
    useEffect(() => {
        const { userName } = JSON.parse(sessionStorage.getItem('login')!) as { userName: string };

        setName(userName);

        return () => {

        }
    }, [])
    const handleLoginOut = () => {
        // 退出登录
        navigate("/");
        sessionRemove();
    };

    const items = [
        // {
        //     key: "1",
        //     label: <span onClick={() => setOpenPersonInfo(true)}>个人资料</span>,
        // },
        // {
        //     key: "2",
        //     label: <span onClick={() => setVisible(true)}>修改登录密码</span>,
        // },
        {
            key: "3",
            label: <span onClick={() => handleLoginOut()}>退出登录</span>,
        },
    ];

    return <HeaderBox>
        <div className="shijian_box">
            <DynamicsTime />

        </div>
        <div className="name_box">
            <Dropdown menu={{ items }}>
                <div className="name_box_box">
                    <span className="iconfont">&#xe8c8;</span>
                    <span>{name === '' ? '--' : name}</span>
                </div>
            </Dropdown>

        </div>
    </HeaderBox>
}
export default Header;